<script setup>
import { useRoute } from 'vue-router'

// 定义分类数据，包含路由路径
const categories = [
  { id: 1, name: '新鲜蔬菜', path: '/fresh/vegetables' },
  { id: 2, name: '新鲜水果', path: '/fresh/fruits' },
  { id: 3, name: '冷冻海鲜', path: '/fresh/seafood' },
  { id: 4, name: '肉类生鲜', path: '/fresh/meat' },
  { id: 5, name: '有机蔬菜', path: '/fresh/organic' },
  { id: 6, name: '进口水果', path: '/fresh/imported' },
  { id: 7, name: '鲜活水产', path: '/fresh/live-seafood' },
  { id: 8, name: '冷藏食品', path: '/fresh/refrigerated' },
  { id: 9, name: '生鲜配送', path: '/fresh/delivery' },
  { id: 10, name: '冷链食品', path: '/fresh/cold-chain' }
]

// 获取当前路由信息，用于判断选中状态
const route = useRoute()
</script>
<template>
  <div class="navbar wrapper">
    <div class="navbar-container">
      <div class="navbar-logo">猜你想搜：</div>

      <div class="category-scroll">
        <router-link
          class="category-item"
          v-for="item in categories"
          :key="item.id"
          :to="item.path"
          :class="{ 'active': route.path === item.path }"
          replace
        >
          {{ item.name }}
        </router-link>
      </div>

    </div>
  </div>
</template>
<style lange="scss" scoped>
.navbar {
  height: 40px;
  padding: 0 16px;
  margin-bottom: 20px;
  background-color: #fff;
  /* 导航栏容器 */
  .navbar-container {
    display:flex;
    align-items: center;
    /* 导航栏logo */
    .navbar-logo{
      color: #666;
      font-size: 18px;
      margin-right: 16px;
    }
    /* category-scroll 子项 */
    .category-scroll{
      flex:1;
      display: flex;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      /* 隐藏滚动条但保持功能 */
      &::-webkit-scrollbar {
        display: none;
      }
    }
    /* category-item 子项 */
    .category-item{
      display: inline-block;
      font-size: 16px;
      color: #333333;
      margin-right: 10px;
      padding: 5px 4px;
      text-decoration: none;
      white-space: nowrap;
    }
    .category-item:hover{
      color: #ff5000;
    }
    /* 选中状态样式 */
    .category-item.active{
      color: #ff5000;
      border-bottom: 1px solid #ff5000;
    }
  }
}
</style>
